<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- saved from url=(0058)http://www.cs.usfca.edu/~galles/visualization/AVLtree.html -->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>AVL Tree Visualzation</title><!-- css sheet for how the page is laid out -->
  <link href="css/visualizationPageStyle.css" rel="stylesheet" type="text/css" /><!-- jqueury stuff.  Only used for the animation speed slider. -->
  <link href="css/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css" />
  <link href="css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="js/jquery-1.5.2.min.js" type="text/javascript">
</script>
  <script src="js/jquery-ui-1.8.11.custom.min.js" type="text/javascript">
</script><!-- Javascript for the actual visualization code -->

  <script src="js/CustomEvents.js" type="text/javascript">
</script>
  <script src="js/UndoFunctions.js" type="text/javascript">
</script>
  <script src="js/AnimatedObject.js" type="text/javascript">
</script>
  <script src="js/AnimatedLabel.js" type="text/javascript">
</script>
  <script src="js/AnimatedCircle.js" type="text/javascript">
</script>
  <script src="js/AnimatedRectangle.js" type="text/javascript">
</script>
  <script src="js/AnimatedLinkedList.js" type="text/javascript">
</script>
  <script src="js/HighlightCircle.js" type="text/javascript">
</script>
  <script src="js/Line.js" type="text/javascript">
</script>
  <script src="js/ObjectManager.js" type="text/javascript">
</script>
  <script src="js/AnimationMain.js" type="text/javascript">
</script>
  <script src="js/Algorithm.js" type="text/javascript">
</script>
  <script src="js/AVL.js" type="text/javascript">
</script>
  <script type="text/javascript">




















  //<![CDATA[


  $( document ).ready(function() {
  // Handler for .ready() called.
        init();
        
  });
  //]]>
  </script>
  
<style type="text/css">
.textinput {
    background: none repeat scroll 0 0 #FAFAFA;
    border: 2px solid #DEDEDE;
    border-radius: 5px 5px 5px 5px;
    display: block;
    font-family: Arial,sans-serif;
    font-size: 15px;
    margin-bottom: 15px;
    margin-right: 5px;
    min-height: 28px;
        
    outline: medium none;
  }
</style>
</head>

<body class="VisualizationMainPage">
  <div class="container" id="container">
    <div id="header">
      <h1>AVL Tree</h1>
    </div>

    <div id="mainContent">
      <div id="algoControlSection">
        <!-- Table for buttons to control specific animation (insert/find/etc) -->
        <!-- (filled in by javascript code specific to the animtion) -->

        <table id="AlgorithmSpecificControls"></table>
      </div><!-- Drawing canvas where all animation is done.  Note:  can be resized in code -->

      <canvas height="600" id="canvas" width="600"></canvas>

      <div id="generalAnimationControlSection">
        <!-- Table for buttons to control general animation (play/pause/undo/etc) ->
                                        <!== (filled in by javascript code, specifically AnimationMain.js)  -->

        <table id="GeneralAnimationControls"></table>
      </div>
    </div><!-- mainContent -->
  </div><!-- container -->
</body>
</html>
